
.info-header {
    width: 100%;
    display: inline-flex;
    font-size: 20px;
    font-weight: 400;
    color: #cc6677;
    padding: 5px;
    padding-left: 20px;
}

.headerpic {
    z-index: 999;
    width: 200px;
    height: 200px;
    border-radius: 30px;
    position: relative;
    left: 400px;
}

.headerpic img {
    width: 200px;
    height: 200px;
    border-radius: 30px;
}
.headerpic a{
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 50px;
}

.headerpic>a:hover{

    background-color: #cc6677;
    opacity: 0.5;
}



.textinfo{
position: relative;
top: -220px;
}

.elem {
    margin: 8px;
    padding: 4px;

}

.elem > input {

    padding: 3px;
    padding-left: 14px;
    font-size: 16px;
    color: #000000;
    width: 150px;
    height: 24px;
    border-radius: 5px;
    border: 1px solid salmon;
}

.elem .item1 {
    width: 100px;
    text-align: right;
    margin-right: 20px;
    float: left;
    line-height: 30px;
}

.elem>textarea{

    padding: 6px;
    font-size: 16px;
    color: #000000;
    width: 150px;
    height: 100px;
    border-radius: 5px;
    border: 1px solid salmon;
}

.sexbtn{
     width: 40px;
     height: 30px;
     padding: 3px;
     line-height: 30px;
     background-color: #eff0f6;
     border-radius: 10px;
     text-align: center;
     margin-right: 10px;
 }
.sexbtn:hover{
    background-color: #cc6677;
    color: white;
    cursor: pointer;
}
.updatebtn{
    width: 40px;
    height: 30px;
    padding: 3px;
    line-height: 30px;
    background-color: #eff0f6;
    border-radius: 10px;
    text-align: center;
    margin-right: 10px;
}
.updatebtn:hover{
    background-color: #cc6677;
    color: white;
    cursor: pointer;
}
.updateblogbtn{
    width: 40px;
    height: 30px;
    padding: 3px;
    line-height: 30px;
    background-color: #eff0f6;
    border-radius: 10px;
    text-align: center;
    margin-right: 10px;
}
.updateblogbtn:hover{
    background-color: #cc6677;
    color: white;
    cursor: pointer;
}
.active{
    background-color: #cc6677;
    color: white;
}


h1 {
    color: #FBF6FD;
    font-size: 60px;
    text-shadow: #272229 2px 2px 4px;
}


#gallery{
    padding: 10px;
    border: 10px solid #cc9393;
    height: auto;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
    background: white;
    border-radius: 30px;
    /* box shadow effect in Safari and Chrome*/
    -webkit-box-shadow: #cc9393 10px 10px 20px;
    /* box shadow effect in Firefox*/
    -moz-box-shadow: #cc9393 10px 10px 20px;
    /* box shadow effect in IE*/
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=10);
    /* box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
    box-shadow: #cc9393 10px 10px 20px;

}


#gallery ul{
    /* This position the ul content in the middle of the gallery*/
    margin-left:-30px;
    border-radius: 10px;
}


#gallery ul li {
    /* In order to create the proper effect with hover we should use display inline-table
        This will display the big picture right next to its thumbnail
    */
    list-style:none;
    display:inline-table;
    padding:15px;
    border-radius: 10px;
}
#gallery ul li img{
    border-radius: 20px;
}


/* This is the pic to display when the hover action occur over the li that contains the thumbnail  */
#gallery ul li .pic{
    /* Animation with transition in Safari and Chrome */
    -webkit-transition: all 0s ease-in-out;
    /* Animation with transition in Firefox (No supported Yet) */
    -moz-transition: all 0s ease-in-out;
    /* Animation with transition in Opera (No supported Yet)*/
    -o-transition: all 0s ease-in-out;
    /* The the opacity to 0 to create the fadeOut effect*/
    opacity:0;
    visibility:hidden;
    position:absolute;
    margin-top:10px;
    margin-left:-20px;
    border:1px solid black;
    border-radius: 10px;
    /* box shadow effect in Safari and Chrome*/
    -webkit-box-shadow:#272229 2px 2px 10px;
    /* box shadow effect in Firefox*/
    -moz-box-shadow:#272229 2px 2px 10px;
    /* box shadow effect in IE*/
    filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
    /* box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
    box-shadow:#272229 2px 2px 10px;
}


#gallery ul li .mini:hover{
    cursor:pointer;
    border-radius: 10px;
}


/* This create the desired effect of showing the imagen when we mouseover the thumbnail*/
#gallery ul li:hover .pic {
    /* width and height is how much the picture is going to growth with the effect */
    width:240px;
    height:240px;
    opacity:1;
    visibility:visible;
    float:right;
}

#gallery .gallery-btn{
    background-color: #cc9393;
    width: 20%;
    height: 30px;
    border-radius: 12px;
    text-align: center;
    vertical-align: center;
    line-height: 25px;
    margin-left: 38%;
    color: white;
    font-weight: 600;
}
#gallery label.gallery-btn:hover{
    cursor: pointer;
}